import React from 'react';
import {
  Router,
  Stack,
  Scene,
  Modal,
  Lightbox,
  Overlay
} from 'react-native-router-flux';
import { StackViewStyleInterpolator } from 'react-navigation-stack';

import HomePage from './apps/HomePage';
import MixturePage from './apps/Animated/MixturePage';
import OpacityPage from './apps/Animated/OpacityPage';
import GeolocationPage from './apps/AMap/GeolocationPage';
import PermissionPage from './apps/Permission/PermissionPage';
import ChatPage from './apps/JiGuang/ChatPage';
import TreePage from './apps/TreePage/TreePage';
import ImagePickerPage from './apps/ImagePicker/ImagePickerPage';
import FlagSecurePage from './apps/FlagSecure/FlagSecurePage';
import ImageViewerPage from './apps/ImageViewer/ImageViewerPage';

const transitionConfig = () => ({
  screenInterpolator: StackViewStyleInterpolator.forFadeFromBottomAndroid
});

const componentName = () => (
  <Router>
    <Overlay key="overlay">
      <Modal key="modal" hideNavBar transitionConfig={transitionConfig}>
        <Lightbox key="lightbox">
          <Stack key="root" titleStyle={{ alignSelf: 'center' }} hideNavBar>
            <Scene key="home" component={HomePage} title="Home" />
            <Scene key="opacity" component={OpacityPage} title="AnimatedPage" />
            <Scene key="mixture" component={MixturePage} title="MixturePage" />
            <Scene key="jmessage" component={ChatPage} title="ChatPage" />
            <Scene key="tree" component={TreePage} title="TreePage" />
            <Scene
              key="imagePickerPage"
              component={ImagePickerPage}
              title="ImagePickerPage"
            />
            <Scene
              key="geolocation"
              component={GeolocationPage}
              title="GeolocationPage"
            />
            <Scene
              key="permission"
              component={PermissionPage}
              title="PermissionPage"
            />
            <Scene
              key="flagSecure"
              component={FlagSecurePage}
              title="FlagSecurePage"
            />
            <Scene
              key="imageViewer"
              component={ImageViewerPage}
              title="ImageViewerPage"
            />
          </Stack>
        </Lightbox>
      </Modal>
    </Overlay>
  </Router>
);

export default componentName;
